<template>
	<view class="form-box">
		<view class="form">
			<u-form :model="form" ref="uForm">
				<u-form-item left-icon="account" :left-icon-style="{'color': '#195ED7'}" label-width="160">
					<u-input placeholder="请输入账号" v-model="form.username" type="text" />
				</u-form-item>
				<u-form-item left-icon="lock" :left-icon-style="{'color': '#195ED7'}" label-width="160">
					<u-input placeholder="请输入密码" v-model="form.password" type="text" />
				</u-form-item>
				<u-form-item left-icon="photo" :left-icon-style="{'color': '#195ED7'}" label-width="160">
					<u-input placeholder="请输入验证码" v-model="form.code" type="text" />
					<image @click="getCode" class="code-image" :src="image"></image>
				</u-form-item>
			</u-form>
		</view>
		<u-button shape="circle" type="primary" @click="login">登陆</u-button>
	</view>
</template>

<script>
	import md5Libs from "../../uview-ui/libs/function/md5.js";
	export default {
		props: {
			desc: String,
			title: String,
		},
		data() {
			return {
				image: '',
				form: {
					uuid: '',
					username: 'test',
					password: '123456',
					code: ''
				}
			}
		},
		created() {
			this.init();
	    },
		methods: {
			init() {
				this.getCode();
			},
			// 获取验证码
			getCode() {
				this.$u.get('/code').then(res => {
					this.form.uuid = res.uuid;
					this.image = "data:image/gif;base64," + res.img;
				})
			},
			login() {
				if(this.form.username == ''){
					this.$u.toast("请输入账号");
					return;
				}
				if(this.form.password == ''){
					this.$u.toast("请输入密码");
					return;
				}
				if(this.form.code == ''){
					this.$u.toast("请输入验证码");
					return;
				} 
				this.$u.post('/auth/login', this.form).then(res => {
					if(res.code != 200){
						this.getCode();
						return;
					}
					this.$u.vuex('vuex_login', false);
					uni.setStorageSync("token", res.data.access_token);
					uni.navigateTo({
						url: '../index/tabbar?PageCur=index'
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.form {
		margin-bottom: 40px;
	}
	.form-box {
		padding: 20px;
	}
	.code-image {
		height: 60rpx;
		width: 160rpx;
	}
</style>
